<template>
<div class="ui form ei">
    <div class="ui action field ei-input">
        <input type="text" placeholder="输入景点名称" v-model.trim="itemVal">
        <button type="button" class="ui icon teal button" @click="addItem">
        <i class="plus icon"></i>
      </button>
    </div>
    <div class="ui ei-tags">
        <a class="ui label" v-for="item in val" @click="removeItem(item)">
        {{item}}
        <i class="delete icon"></i>
      </a>
    </div>
</div>
</template>

<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import {
    mapState
} from 'vuex'

export default {
    data() {
        return {
            enum_val: null,
            val: [], //所有值
            itemVal: "", //表单值
            oldVal: [],
        }
    },
    methods: {
        addItem() {
            if (!/^.+$/.test(this.itemVal)) {
                util.showMsg(this, 'error', '请输入有效的景点名称');
                return;
            }
            if (~this.val.indexOf(this.itemVal)) {
                util.showMsg(this, 'info', this.itemVal + '已存在');
                return;
            }
            this.val.push(this.itemVal);
            this.itemVal = "";
        },
        removeItem(item) {
            this.val.splice(this.val.indexOf(item), 1);
        },
        refresh() {},
        initVal(code) {
            let _this = this;
            if (code) {
                util.http.getDataCom(_this, '/index/CityScenic/read', {
                    id: code
                }, (rs) => {
                        _this.oldVal = rs.names?rs.names.split(','):[];
                        _this.$emit('setVo', _this.field.name, _this.submitArray.toString())
                });
            }
        }
    },
    watch: {
        timestemp: {
            immediate: true,
            handler(val) {}
        },
        val: {
            immediate: true,
            deep: true,
            handler(val) {
                if (this.editVo.city_code) {
                    let code = JSON.parse(this.editVo.city_code)[0].code;
                    this.initVal(code);
                }
            }
        }
    },
    computed: {
		submitArray(){
			return this.op=='update'?this.val:Array.from(new Set(this.val.concat(this.oldVal)))
		},
		op(){
			return this.$store.state.global.op;
		},
        editVo() {
            return this.$store.state.global.editVo;
        },
        placeholder() {
            return `请选择${this.field.title}`
        },
    },
    props: ['field', 'type', 'param', 'editType', 'timestemp'],
    components: {},
    created() {
        this.val = this.field.fval ? this.field.fval.split(',') : [];
    },
    mounted() {
        let _that = this

    }
};
</script>

<style lang="less" scoped>
.ei {
    &-input {
        input {
            width: auto!important;
            min-width: 300px;
        }
    }
}
</style>
